<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-07-22 11:04:00
 * @LastEditors: chen_yt
 * @LastEditTime: 2022-07-19 15:42:49
 * @Description: 应用详情
 -->
<template>
  <div class="menu-tree">
    <!-- <div class="select-all-button">
      <fks-checkbox v-model="isAllMenuChecked" @change="selectAllMenus">
        {{ LANG.ALL }}
      </fks-checkbox>
    </div> -->
    <div ref="menu" class="menu-tree-container" v-loading="loading">
      <fks-tree
        ref="menuAsTree"
        key="menuAsTree"
        :data="menuAsTree"
        :props="defaultProps"
        node-key="id"
        show-checkbox
        :default-expand-all="false"
        @check="menuCheck"
        @check-change="selectChange"
      >
        <div slot-scope="{ node, data }" class="tree-item">
          <span class="name">{{
            LANG[data.content.title] || data.content.title
          }}</span>
        </div>
      </fks-tree>
    </div>
  </div>
</template>
<script>
import { getMenusTree } from './api'
import { treeToArray } from '@/utils/array'
import { menuNotAvaliable, menuRecommend } from '@/saas/menu'

export default {
  name: 'SimpleMenu',
  components: {},
  data() {
    return {
      operateType: 'view',
      isAllMenuChecked: false,
      defaultProps: {
        id: 'id',
        children: 'children',
        disabled: this.isNodeDisabled
      },
      menuAsTree: [], //菜单权限树
      oringinMenuAsArray: [],
      selectedMenuAsArray: [],
      loading: true
    }
  },
  computed: {},
  watch: {
    selectedMenuAsArray(newVal, oldVal) {
      if (newVal.length !== oldVal.length) {
        this.$refs.menuAsTree.setCheckedKeys(this.selectedMenuAsArray)

        this.$emit('update:menu', [
          ...this.selectedMenuAsArray,
          ...this.$refs.menuAsTree.getHalfCheckedKeys()
        ])
      }
    },
    oringinMenuAsArray() {
      if (this.oringinMenuAsArray.length > 0) {
        this.selectDefaultNode()
      }
    }
  },

  methods: {
    isNodeDisabled(data, node) {
      return this.isMenuDisabled(data.content.code)
    },
    isMenuDisabled(code = '') {
      return menuNotAvaliable.includes(code)
    },
    selectDefaultNode() {
      let defaultChecked = this.oringinMenuAsArray.filter((item) =>
        menuRecommend.includes(item.content.code)
      )
      this.$nextTick(() => {
        this.$refs.menuAsTree.setCheckedNodes(defaultChecked)
      })
    },
    initData() {
      this.getMenuAsTree()
    },

    selectChange() {
      this.selectedMenuAsArray = this.$refs.menuAsTree.getCheckedKeys()
    },

    /**
     * @description: 获取菜单树
     * @param {type}
     * @return:
     */
    getMenuAsTree() {
      this.oringinMenuAsArray = []
      this.menuAsTree = []
      this.selectedMenuAsArray = []
      this.loading = true

      getMenusTree()
        .then((res) => {
          if (res.status) {
            this.menuAsTree = res.data
            this.oringinMenuAsArray = treeToArray([...res.data])
          }
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false
        })
    },

    menuCheck(data, { checkedKeys }) {
      if (checkedKeys.length == this.oringinMenuAsArray.length) {
        this.isAllMenuChecked = true
        return
      }
      this.isAllMenuChecked = false
    },

    /**
     * @description: 一键全选和一键取消全选菜单
     */
    selectAllMenus() {
      if (this.isAllMenuChecked) {
        this.$refs.menuAsTree.setCheckedNodes(this.menuAsTree)
        return
      }

      this.$refs.menuAsTree.setCheckedNodes([])
    }
  },
  mounted() {
    this.initData()
  }
}
</script>
<style lang="scss" scoped>
.select-all-button {
  padding-left: 24px;
}
</style>